<template>
	<page-meta>
		<navigation-bar title="乐居" background-color="#354e44" />
	</page-meta>
	<view class="order">
		<view class="order-topbar" :style="{top:topHeight+'px'}">
			<view @tap="changeTab(index)" :class="['order-topbar-item',index==current?'order-topbar-active':'']"
				v-for="(item,index) in topBar" :key="item">{{item}}</view>
		</view>

		<view v-if="current!=4">
			<view class="" v-if="!getRenderOrders.length">暂无数据</view>
			<view class="order-list" v-else>
				<view class="order-list-item" v-for="item in getRenderOrders" :key="item.order.id">
					<view class="order-list-item-top">
						<view class="order-list-item-top-ordersn">订单编号:{{item.order.orderSn}}</view>
						<view class="order-list-item-top-status">{{item.order.status|statusText}}</view>
					</view>
					<view @tap="goToProductDetail(goods.productId)" class="order-list-item-goods" v-for="goods in item.items" :key="goods.productSkuId">
						<image class="order-list-item-goods-img" :src="goods.productPic"></image>
						<view class="order-list-item-goods-right">
							<view class="order-list-item-goods-right-info">
								<view class="order-list-item-goods-right-info-left name">{{goods.productName}}</view>
								<view class="order-list-item-goods-right-info-right">¥{{goods.productPrice}}</view>
							</view>
							<view class="order-list-item-goods-right-info">
								<view class="order-list-item-goods-right-info-left name">编号:{{goods.productName}}</view>
								<view class="order-list-item-goods-right-info-right">X{{goods.productQuantity}}</view>
							</view>
							<view class="order-list-item-goods-right-info">
								<view class="order-list-item-goods-right-info-left name">规格:</view>
							</view>
							<view class="order-list-item-goods-right-info">
								<view class="order-list-item-goods-right-info-left">{{goods.productAttr|format}}</view>
							</view>
						</view>
						<view @tap="goToReturnOrder(item.order.id,goods.id)" v-if="goods.isReturn==0&&current==2"
							class="order-list-item-goods-bottom">退货</view>
						<view v-if="goods.isReturn==1&&current==2" class="order-list-item-goods-bottom active">退货中
						</view>
					</view>
					<view class="order-list-item-center">
						<view class="order-list-item-center-time">时间:{{item.order.createTime}}</view>
						<view class="order-list-item-center-all">合计:¥{{item.order.totalAmount}}</view>
					</view>
					<view v-if="current==0" class="order-list-item-bottom">
						<view @tap="cancelOrder(item.order.id)" class="order-list-item-bottom-btn">取消订单</view>
						<view @tap="goToOrder(item.order.id)" class="order-list-item-bottom-btn">付款</view>
					</view>
					<view v-if="current==2" class="order-list-item-bottom">
						<view @tap="receiveOrder(item.order.id)" class="order-list-item-bottom-btn">确认收货</view>
					</view>
					<view v-if="current==3||current==4" class="order-list-item-bottom">
						<view @tap="deleteOrder(item.order.id)" class="order-list-item-bottom-btn border-color">
							订单已关闭,删除订单记录</view>
					</view>
				</view>
			</view>


		</view>
		
		<view v-else class="return">
			<view class="" v-if="!returnList.length">暂无数据</view>
			<view v-else class="return-order" v-for="item in returnList" :key="item.id">
				<view class="return-order-top">
					<view class="return-order-top-ordersn"><view class="">
						订单编号:
					</view>
					{{item.orderSn}}</view>
					<view class="return-order-top-status">{{item.status|orderProcessText}}</view>
				</view>
				<view  @tap="goToProductDetail(item.productId)" class="return-order-goods">
					<image class="return-order-goods-img" :src="item.productPic" ></image>
					<view class="return-order-goods-right">
						<view class="return-order-goods-right-info return-order-goods-name">
							<view class="return-order-goods-right-info-left">{{item.productName}}</view>
							<view class="return-order-goods-right-info-right">¥{{item.productPrice}}</view>
						</view>
						<view class="return-order-goods-right-info return-order-goods-name">
							<view class="return-order-goods-right-info-left">编号:{{item.id}}</view>
							<view class="return-order-goods-right-info-right">X{{item.productCount}}</view>
						</view>
						<view class="return-order-goods-right-info return-order-goods-name">
							<view class="return-order-goods-right-info-left">规格:</view>
						</view>
						<view class="return-order-goods-right-info return-order-goods-name">
							<view class="return-order-goods-right-info-left">{{item.productAttr|format}}</view>
						</view>
					</view>
				</view>
				<view class="return-order-bottom">
					<view class="return-order-bottom-time">时间:{{item.createTime}}</view>
					<view class="return-order-bottom-amount">合金:¥{{item.returnAmount}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		findAllOrders as findAllOrdersApi,
		cancelOrder as cancelOrderApi,
		orderReturnApplys as orderReturnApplysApi,
		_clearOrderFocus as _clearOrderFocusApi,
		receiveDone as receiveDoneApi
	} from '../../../api/common/index.js'
	export default {
		data() {
			return {
				topHeight: 0,
				topBar: ['待付款', '已付款', '已发货', '已收货', '售后'], //头部导航栏
				current: 0, //头部导航栏选中
				allOrderList: [], //所有订单
				returnList: [], //退单列表
			}
		},
		onLoad(config) {
			var res = uni.getSystemInfoSync();
			this.topHeight = res.windowTop;
			this.getOrders();
			this.getReturnList();
			this.current=config.current;
		},
		filters: {
			//订单状态
			statusText(val) {
				if (val == 0) {
					return "未付款"
				} else if (val == 1) {
					return "已付款,等待发货"
				} else if (val == 2) {
					return "已发货"
				} else if (val == 3) {
					return "已收货"
				} else if (val == 4) {
					return "已退单"
				} else {
					return "无效订单"

				}
			},
			//退货商品
			orderProcessText(process) {
				var text = '等待处理';
				switch (JSON.stringify(process)) {
					case '0':
						text = '等待处理';
						break;
					case '1':
						text = '确认退货,等待用户发货';
						break;
					case '2':
						text = '已退款';
						break;
					case '3':
						text = '已拒绝';
						break;
					case '9':
						text = '拒绝退货';
						break;

					default:
						break;
				}
				return text;
			},
			//过滤器处理规格sku
			format(value) {
				value = JSON.parse(value);
				var str = "";
				value.forEach(ele => {
					str += ele.key + ':' + ele.value + ' ';
				})
				return str
			},
		},
		computed: {
			getRenderOrders() {
				if (this.current == 3) {
					return this.allOrderList.filter(ele => ele.order.status == 3 || ele.order.status == 4)
				}
				return this.allOrderList.filter(ele => ele.order.status == this.current)
			}
		},
		methods: {
			//跳转到商品详情
			goToProductDetail(id){
				uni.navigateTo({
					url:`../../productDetail/productDetail?id=${id}`
				})
			},
			//重新获取接口数据
			reset(){
				this.getOrders();
				this.getReturnList();
			},
			//确认收货
			receiveOrder(orderId) {
				receiveDoneApi({
						orderId: orderId
					})
					.then(res => {
						this.reset();
					})
			},
			//强制删除某个订单
			deleteOrder(orderId) {
				_clearOrderFocusApi(orderId)
					.then(res => {
						this.reset();
					})
			},
			//查看退单列表
			getReturnList() {
				orderReturnApplysApi()
					.then(res => {
						this.returnList = res.data.items;
					})
			},
			//跳转到退货页面
			goToReturnOrder(orderId, goodsId) {
				uni.setStorageSync('orderId', orderId);
				uni.setStorageSync('goodsId', goodsId);
				console.log('orderId==>', orderId);
				uni.navigateTo({
					url: `returnOrder/returnOrder?orderId=${orderId}&goodsId=${goodsId}`
				})
			},
			//取消订单
			cancelOrder(orderId) {
				cancelOrderApi(orderId)
					.then(res => {
						this.reset();
					})
			},
			//跳转到订单页面
			goToOrder(orderId) {
				uni.setStorageSync('orderId', orderId);
				uni.navigateTo({
					url: `../../productDetail/confirmOrder/confirmOrder?orderId=${orderId}`
				})
			},
			//切换导航栏
			changeTab(idx) {
				this.current = idx;
			},
			getOrders() {
				findAllOrdersApi()
					.then(res => {
						this.allOrderList = res.data.orderList;
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.return{
		&-order{
			box-sizing: border-box;
			padding: 30rpx;
			width: 100%;
			margin-bottom: 30rpx;
			border-radius: 15rpx;
			background-color: #FFFFFF;
			font-size: 26rpx;
			&-top{
				display: flex;
				justify-content: space-between;
				padding-bottom: 15rpx;
				border-bottom: 1rpx solid gray;
				&-ordersn{
					width: 400rpx;
				}
				
			}
			
			&-goods{
				display: flex;
				padding: 25rpx 0;
				border-bottom: 1rpx solid gray;
				&-img{
					display: block;
					width: 162rpx;
					height: 162rpx;
					margin-right: 15rpx;
				}
				
				&-right{
					display: flex;
					flex-direction: column;
					justify-content: center;
					width: 450rpx;
				
					&-info{
						display: flex;
						justify-content: space-between;
						color: #8d8d8d;
						&-left{
							flex: 1;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
						&-right{
							width: fit-content;
						}
					}
					&-info:first-child{
						color: #333;
					}
				}
				
			}
		
			&-bottom{
				display: flex;
				justify-content: space-between;
				margin-top: 15rpx;
			}
		}
	}
	.active {
		color: red;
	}

	.order {
		box-sizing: border-box;
		padding: 130rpx 30rpx 0;
		width: 100%;
		height: 100%;
		min-height: 100vh;
		background-color: #f1ece7;

		&-topbar {
			position: fixed;
			z-index: 10;
			left: 0;
			display: flex;
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			justify-content: space-around;
			background-color: #354e44;
			color: #FFFFFF;

			&-active {
				color: red;
			}
		}

		&-list {
			&-item {
				width: 100%;
				box-sizing: border-box;
				padding: 30rpx;
				background-color: #FFFFFF;
				border-radius: 15rpx;
				margin-bottom: 30rpx;

				&-top {
					display: flex;
					font-size: 24rpx;
					justify-content: space-between;
					align-items: center;
					height: 60rpx;
					line-height: 80rpx;
					border-bottom: 1rpx solid gray;

					&-status {
						color: blue;
					}
				}

				&-center {
					display: flex;
					margin-top: 10rpx;
					font-size: 26rpx;
					justify-content: space-between;
				}

				&-bottom {
					margin-top: 15rpx;
					display: flex;
					justify-content: flex-end;

					&-btn {
						width: 150rpx;
						border: 1rpx solid #333;
						height: 60rpx;
						font-size: 26rpx;
						line-height: 60rpx;
						text-align: center;
						margin-left: 30rpx;
						border-radius: 30rpx;
					}

					.border-color {
						width: 296rpx;
						font-size: 24rpx;
						border-color: red;
					}
				}

				&-goods {
					display: flex;
					// height: 202rpx;
					padding: 20rpx 0;
					flex-wrap: wrap;
					box-sizing: border-box;
					border-bottom: 1rpx solid gray;

					&-bottom {
						width: 100%;
						display: flex;
						justify-content: flex-end;
						font-size: 26rpx;
						text-decoration: underline;
					}

					&-img {
						display: block;
						width: 162rpx;
						height: 162rpx;
						margin-right: 15rpx;
					}

					&-right {
						display: flex;
						width: 410rpx;
						height: 162rpx;
						flex-direction: column;
						justify-content: space-between;
						color: gray;

						&-info {
							display: flex;
							justify-content: space-between;
							align-items: center;
							font-size: 28rpx;

							.name {
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
						}

						.name {
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						&-info:first-child {
							color: #333;
							font-weight: 500;

						}

					}


				}


			}


		}
	}
</style>
